<template>
	<view>
		<view class="broadcast_del">
			<button class="broadcast_all" >播放全部</button>
			<view class="iconfont icon-shanchu manage-icon" @tap="deleteMylikestory()"></view>
		</view>
		<view class="story_list">
			<view class="story_list_li">
				<view class="story_picure">
					<image src="" mode=""></image>
				</view>
				<view class="story_introduce">
				    <text class="story_title">龟兔赛跑</text><br>
					<text class="story_concent">乌龟和小兔子赛跑的比赛</text>
				</view>
			</view>
			<view class="story_list_li">
				<view class="story_picure">
					<image src="" mode=""></image>
				</view>
				<view class="story_introduce">
				    <text class="story_title">龟兔赛跑</text><br>
					<text class="story_concent">乌龟和小兔子赛跑的比赛</text>
				</view>
			</view>
			<view class="story_list_li">
				<view class="story_picure">
					<image src="" mode=""></image>
				</view>
				<view class="story_introduce">
				    <text class="story_title">龟兔赛跑</text><br>
					<text class="story_concent">乌龟和小兔子赛跑的比赛</text>
				</view>
			</view>
			<view class="story_list_li">
				<view class="story_picure">
					<image src="" mode=""></image>
				</view>
				<view class="story_introduce">
				    <text class="story_title">龟兔赛跑</text><br>
					<text class="story_concent">乌龟和小兔子赛跑的比赛</text>
				</view>
			</view>
			<view class="more">
				<view class="more_line"></view>
				<text  class="more_title">没有更多了</text>
				<view class="more_line"></view>
			</view>
		</view>
		<view class="buttom">
			<view class="show_buttom_title">
				<image src="" mode="" class="show_story_picture"></image>
				<text class="show_story_title">龟兔赛跑</text>
			</view>
			<view class="show_buttom_button">
				<view class="iconfont icon-bofang manage-icon"></view>
				<view class="iconfont icon-liebiao manage-icon" @tap="showlikestorylist()"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storylist:[]
			}
		},
		onLoad() {
			// const requestTask = uni.request({
			//     url: '', 
			//     success: (res) => {
			// 		console.log(res.data.)
			// 		this.storylist = res.data.;
			//     }
			// });
		},
		methods: {
			//显示故事列表
			showlikestorylist(){
				alert("喜欢故事列表");
			},
			//故事删除按钮
			deleteMylikestory(){
				console.log("执行")
				uni.showModal({
				    title: '提示',
				    content: '确定删除吗？',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    } 
				});
			}
		},
		
		
	}
</script>

<style>
	page{
		background-color: rgb(230,230,230);
	}
	
	.broadcast_del{
		display: flex;
		justify-content: space-between;
	}
	
	.broadcast_all{
		margin: 10px;
		width: 150px;
		height: 34px;
		background-color: rgb(255,137,32);
		border-radius: 18px;
		font-size: 13px;
		color: white;
	}
	
	.manage-icon{
		color: rgb(255,137,32);
		font-size: 30px;
		margin-right: 10px;
	}
	
	.story_list{
		
	    /* background-color: rgb(230,230,230); */
	}
	
	.story_list_li{
		background-color: rgb(255,255,255);
		width: 100%;
		height: 90px;
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}
	
	.story_picure{
		border-radius: 10px;
		width: 120px;
		height: 80px;
		background-color: #007AFF;
		padding: 5px;
		margin: 0px 0px 5px 10px;
	}
	
	.story_introduce{
		line-height: 30px;
		width: 170px;
		height: 80px;
		padding: 5px;
		margin: 5px 10px  5px 10px;
	}
	
	.story_title{
		font-size: 20px;
		color: rgb(115,115,115);
	}
	
	.story_concent{
		color: rgb(115,115,115);
		margin-top: 10px;
		font-size: 15px;
	}
	
	.more{
		width: 100%;
		height: 20px;
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}
	
	.more_line{
	    width: 35%;
		height: 1px;
		background-color: rgb(200,200,200);
		margin-top: 13px;
	}
	
	.more_title{
		font-size: 15px;
		color: rgb(115,115,115);
	}
	
	.buttom{
		position: fixed;
		z-index: 999;
		display: flex;
		justify-content: space-around;
		background-color: rgb(242,242,242);
		width: 100%;
		height: 50px;
		margin-top: 70px;
	}
	
	.show_buttom_title{
		width: 60%;
		height: 100%;
	}
	
	.show_story_picture{
		width: 40%;
		height: 100%;
		background-color: red;
		border-radius: 10px;
	}
	
	.show_story_title{
		position: relative;
		bottom: 18px;
		left: 20px;
	}
	
	.show_buttom_button{
		display: flex;
		justify-content: space-around;
		width: 30%;
		height: 80%;
	}
</style>
